<template>
  <div>
    <template v-for="(navItem, index) in navData">
      <!-- 有子菜单 -->
      <q-expansion-item
        :key="index"
        :group="group"
        v-if="navItem.children"
        v-show="navItem.children.length>0"
        expand-separator
        expand-icon="mdi-chevron-down"
        :icon="navItem.meta.icon"
        :label="navItem.meta.title"
        :header-inset-level="indent"
      >
        <nav-bar
          v-if="navItem.children.length>0"
          :navData="navItem.children"
          :indent="indent + 0.5"
          :group="group + 1"
        ></nav-bar>
      </q-expansion-item>
      <!-- 没有子菜单 -->
      <q-item
        :key="index"
        v-else
        v-show="navItem.meta.hidden !== true"
        clickable
        tag="a"
        :to="navItem.path"
        :inset-level="indent"
      >
        <q-item-section
          v-if="navItem.meta.icon"
          avatar
        >
          <q-icon :name="navItem.meta.icon" />
        </q-item-section>
        <q-item-section>
          <q-item-label>{{ navItem.meta.title }}</q-item-label>
        </q-item-section>
      </q-item>
    </template>
  </div>
</template>

<script>
import NavBar from 'components/common/NavBar/NavBar'

export default {
  name: 'NavBar',
  props:{
    navData: {
      type: Array,
      require: true,
      default() {
        return []
      }
    },
    indent: {
      type: Number,
      require: false,
      default: 0
    },
    group: {
      type: String,
      require: false,
      default: '1'
    }
  },
  components: {
    NavBar
  },
  data () {
    return {
    }
  }
}
</script>
<style scoped>
</style>
